<div class="row vertical-spacing" ng-if="enrollmentStatus==='TODAY' && selectedProgram && (selectedProgram.displayFrontPageList || frontPageListEnabled)">
    <div id="selectDropDownParent" class="input-group col-md-3">
        <button type="button" class="select-dropdown-button form-control">{{selectedEventsTodayFilter.name}}</button>
        <div class="input-group-btn todayfilter-drop-down">
            <button class="btn btn-default select-dropdown-caret" type="button" data-toggle="dropdown" title="Test"><i class="fa fa-caret-down"></i></button>
            <ul id="selectDropDown" class="dropdown-menu dropdown-menu-right">
                <li ng-repeat="filter in eventsTodayFilters | orderBy: 'name'">
                    <a href ng-click="fetchTeisEventsToday(filter)">{{filter.name}}</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<i ng-if="!teiFetched && showTrackedEntityDiv && enrollmentStatus==='TODAY'" class="fa fa-spinner fa-spin fa-2x"></i>
<div ng-if="teiFetched">
    <div class="alert alert-warning vertical-spacing" ng-if="trackedEntityList.length === 0 || !trackedEntityList.length">
        {{'no'| translate}} {{selectedProgram.trackedEntityType.displayName|| 'records' | translate}} {{'found'| translate}}
    </div>

    <div class="small-vertical-spacing" ng-if="trackedEntityList.length > 0">
        <table class="table table-striped dhis2-table-hover table-bordered">               
            <thead>                        
                <tr>
                    <th ng-repeat="gridColumn in gridColumns| filter:{show: true}" class='mouse-pointer' ng-click="sortGrid(gridColumn)">                            
                        <!-- sort icon begins -->                                
                        <span ng-hide="gridColumn.showFilter" class="bold pointer" title="{{'sort'| translate}}" class="fa fa-sort">
                            <span class="fa-stack">
                                <span ng-class="{true: 'red'} [sortColumn.id === gridColumn.id && !reverse]"><i class="fa fa-sort-asc fa-stack-1x"></i></span>
                                <span ng-class="{true: 'red'} [sortColumn.id === gridColumn.id && reverse]"><i class="fa fa-sort-desc fa-stack-1x"></i></span>
                            </span>
                            {{gridColumn.formName ? gridColumn.formName : gridColumn.displayName}}
                        </span>
                        <!-- sort icon ends -->                            
                    </th>                              
                </tr>                        
            </thead>
            <tbody id="list">
                <tr ng-if="!addingTeiAssociate"
                    ng-repeat="trackedEntityType in trackedEntityList.rows.own | orderBy:d2Sort:reverse" 
                    ng-click="mainTei.trackedEntityInstance ? assignRelationship(trackedEntityType) : showDashboard(trackedEntityType)"
                    ng-class="{true: 'inactive-tei'} [trackedEntityType.inactive]"
                    title="{{mainTei.trackedEntityInstance ? 'select' : 'go_to_dashboard'| translate}}">
                    <td ng-repeat="gridColumn in gridColumns| filter:{show: true}">
                        <span ng-switch="gridColumn.valueType">
                            <span ng-switch-when="BOOLEAN">
                                <span ng-if="trackedEntityType[gridColumn.id] === 'true'">{{'yes'| translate}}</span>
                                <span ng-if="trackedEntityType[gridColumn.id] === 'false'">{{ 'no' | translate}}</span>
                            </span>
                            <span ng-switch-when="TRUE_ONLY">
                                <span ng-if="trackedEntityType[gridColumn.id] === 'true'"><i class="fa fa-check"></i></span>
                            </span>
                            <span ng-switch-when="ORGANISATION_UNIT">
                                {{trackedEntityType[gridColumn.id] && orgUnitNames[trackedEntityType[gridColumn.id]] ? orgUnitNames[trackedEntityType[gridColumn.id]] : trackedEntityType[gridColumn.id]}}
                            </span>
                            <span ng-switch-default>{{trackedEntityType[gridColumn.id]}}</span>
                        </span>
                    </td>
                </tr>
                <tr ng-if="!addingTeiAssociate"
                    ng-repeat="trackedEntityType in trackedEntityList.rows.other | orderBy:d2Sort:reverse" 
                    ng-click="mainTei.trackedEntityInstance ? assignRelationship(trackedEntityType) : showDashboard(trackedEntityType)"
                    ng-class="{true: 'inactive-tei'} [trackedEntityType.inactive]"
                    title="{{mainTei.trackedEntityInstance ? 'select' : 'go_to_dashboard'| translate}}">
                    <td ng-repeat="gridColumn in gridColumns| filter:{show: true}">
                        <span ng-switch="gridColumn.valueType">
                            <span ng-switch-when="BOOLEAN">
                                <span ng-if="trackedEntityType[gridColumn.id] === 'true'">{{'yes'| translate}}</span>
                                <span ng-if="trackedEntityType[gridColumn.id] === 'false'">{{ 'no' | translate}}</span>
                            </span>
                            <span ng-switch-when="TRUE_ONLY">
                                <span ng-if="trackedEntityType[gridColumn.id] === 'true'"><i class="fa fa-check"></i></span>
                            </span>
                            <span ng-switch-when="ORGANISATION_UNIT">
                                {{trackedEntityType[gridColumn.id] && orgUnitNames[trackedEntityType[gridColumn.id]] ? orgUnitNames[trackedEntityType[gridColumn.id]] : trackedEntityType[gridColumn.id]}}
                            </span>
                            <span ng-switch-default>{{trackedEntityType[gridColumn.id]}}</span>
                        </span>
                    </td>
                </tr>

                <tr ng-if="addingTeiAssociate"
                    ng-repeat="trackedEntityType in trackedEntityList.rows.own| orderBy:d2Sort:reverse" 
                    ng-click="assignRelationship(trackedEntityType)"
                    ng-class="{true: 'inactive-tei'} [trackedEntityType.inactive]"
                    title="{{'select'| translate}}">
                    <td ng-repeat="gridColumn in gridColumns| filter:{show: true}">
                        <span ng-switch="gridColumn.valueType">
                            <span ng-switch-when="BOOLEAN">
                                <span ng-if="trackedEntityType[gridColumn.id] === 'true'">{{'yes'| translate}}</span>
                                <span ng-if="trackedEntityType[gridColumn.id] === 'false'">{{ 'no' | translate}}</span>
                            </span>
                            <span ng-switch-when="TRUE_ONLY">
                                <span ng-if="trackedEntityType[gridColumn.id] === 'true'"><i class="fa fa-check"></i></span>
                            </span>
                            <span ng-switch-when="ORGANISATION_UNIT">
                                {{trackedEntityType[gridColumn.id] && orgUnitNames[trackedEntityType[gridColumn.id]] ? orgUnitNames[trackedEntityType[gridColumn.id]] : trackedEntityType[gridColumn.id]}}
                            </span>
                            <span ng-switch-default>{{trackedEntityType[gridColumn.id]}}</span>
                        </span>
                    </td>
                </tr>
                <tr ng-if="addingTeiAssociate"
                    ng-repeat="trackedEntityType in trackedEntityList.rows.other| orderBy:d2Sort:reverse" 
                    ng-click="assignRelationship(trackedEntityType)"
                    ng-class="{true: 'inactive-tei'} [trackedEntityType.inactive]"
                    title="{{'select'| translate}}">
                    <td ng-repeat="gridColumn in gridColumns| filter:{show: true}">
                        <span ng-switch="gridColumn.valueType">
                            <span ng-switch-when="BOOLEAN">
                                <span ng-if="trackedEntityType[gridColumn.id] === 'true'">{{'yes'| translate}}</span>
                                <span ng-if="trackedEntityType[gridColumn.id] === 'false'">{{ 'no' | translate}}</span>
                            </span>
                            <span ng-switch-when="TRUE_ONLY">
                                <span ng-if="trackedEntityType[gridColumn.id] === 'true'"><i class="fa fa-check"></i></span>
                            </span>
                            <span ng-switch-when="ORGANISATION_UNIT">
                                {{trackedEntityType[gridColumn.id] && orgUnitNames[trackedEntityType[gridColumn.id]] ? orgUnitNames[trackedEntityType[gridColumn.id]] : trackedEntityType[gridColumn.id]}}
                            </span>
                            <span ng-switch-default>{{trackedEntityType[gridColumn.id]}}</span>
                        </span>
                    </td>
                </tr>
            </tbody>        
        </table>
        <div ng-if="enrollmentStatus!=='TODAY'">
         <serverside-paginator></serverside-paginator>           
        </div>

    </div>
</div>
